<!--
  * 时间：2024/11/21
  * 作者：刘岩
  * 描述：出客量图表组件
-->
<template>
  <div class="out-the-num">
    <div class="container-header">
      <div>
        <span>总出客量（人）</span>
        <br>
        <span class="num">{{ total }}</span>
      </div>
      <div>
        <span>最大出客量（人）</span>
        <br>
        <span class="num">{{ max }}</span>
      </div>
    </div>
    <div class="echarts-box" ref="echartsBox"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  name: 'OutTheNum',
  props: {
    // 图表展示类型
    echartsType: {
      type: String,
      default: 'bar'
    },
    xData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    yData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      total: 0,
      max: 0
    }
  },
  watch: {
    // 监听图表展示类型，重新渲染
    echartsType(val) {
      this.init();
    },
    xData() {
      this.init();
    },
    yData() {
      this.init();
      // 计算总出客量和最大出客量
      this.max = this.yData.length > 0 ? Math.max.apply(null, this.yData) : 0;
      this.total = _.sum(this.yData);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 时间：2024/11/19
     * 作者：刘岩
     * 功能：渲染进客量图表
     */
    init() {
      let myChart = echarts.init(this.$refs.echartsBox, 'macarons');
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '20',
          top: '40',
          right: '20',
          bottom: '50',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'inside'
          },
          {
            type: 'slider'
          }
        ],
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#000000',
              fontSize: 14
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '单位：人',
          nameTextStyle: {
            color: "#000000",
            fontSize: 14,
            padding: [0, 15, 4, 45]
          },
          axisLabel: {
            color: '#000000',
            fontSize: 14
          },
          splitLine: {
            //修改背景线条样式
            show: true, //是否展示
            lineStyle: {
              color: '#1C3F61', //线条颜色
              type: 'dashed' //线条样式，默认是实现，dashed是虚线
            }
          }
        },
        series: [
          {
            name: 'Direct',
            type: this.echartsType,
            barWidth: '60%',
            data: this.yData
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped lang="scss">
.out-the-num {
  display: flex;
  flex: 1;
  flex-direction: column;
  .container-header {
    padding: 15px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    color: #606266;
    font-size: 14px;
    .num {
      display: inline-block;
      color: #000000;
      font-weight: bold;
      font-size: 20px;
    }
  }
  .echarts-box {
    flex: 1;
  }
}
</style>
